<template>
  <a-modal title="新增" v-model="show" :maskClosable="false" :width="1050" placement="right" :closable="true"
    @cancel="onClose" :footer="null" :visiable="devBindInfoAddVisiable">
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="设备唯一编号" v-bind="formItemLayout">
            <a-input v-decorator="['bindDevId']" :disabled="true" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='产品/品牌代码' v-bind="formItemLayout">
            <a-input v-decorator="['bindDevBrand', {
              rules: [
                { required: true, message: '必填字段' },
                { max: 20, message: '不超过20个字符' },
              ],
            }]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="设备名称" v-bind="formItemLayout">
            <a-input v-decorator="['bindDevModel', {
              rules: [
                { required: true, message: '必填字段' },
                { max: 20, message: '不超过20个字符' },
              ],
            }]" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="推送渠道开关" v-bind="formItemLayout">
            <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择"
              option-filter-prop="children" :filter-option="filterOption" @select="showMsgPushKey"
              v-decorator="['msgPushFlag', { rules: [{ required: true, message: '必填字段' }] }]">
              <a-select-option key="Y">开</a-select-option>
              <a-select-option key="N">关</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="绑定类型" v-bind="formItemLayout">
            <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择"
              option-filter-prop="children" :filter-option="filterOption" @select="showBindUserId"
              v-decorator="['bindType', { rules: [{ required: true, message: '必填' }] }]">
              <a-select-option key="00">收银员</a-select-option>
              <a-select-option key="01">商户</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="绑定商户" v-bind="formItemLayout">
            <a-select show-search placeholder="请输入代码或名称" option-filter-prop="children" style="width: 334px"
              :filter-option="filterOption" @focus="selectBindMchntN" @search="selectBindMchntN"
              v-decorator="['mchntNo', { rules: [{ required: true, message: '必填字段' }] }]">
              <a-select-option v-for="(d, index) in bindMchntNData" :key="d.mchntNo">
                {{ d.mchntNo }}-{{ d.mchntName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24" v-show="msgPushKeyShow">
          <a-form-item label="推送渠道" v-bind="formItemLayout">
            <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择"
              option-filter-prop="children" :filter-option="filterOption"
              v-decorator="['msgPushKey', { rules: [{ required: msgPushKeyShow, message: '必填字段' }] }]">
              <a-select-option key="01">阿里云</a-select-option>
              <a-select-option key="02">信雅达</a-select-option>
              <a-select-option key="03">意锐</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" v-show="bindUserIdShow">
          <a-form-item label="收银员昵称" v-bind="formItemLayout">
            <a-select show-search placeholder="" option-filter-prop="children" style="width: 100%" :allowClear="true"
              @focus="selectBindUserId" :filter-option="filterOption"
              v-decorator="['bindUserId', { rules: [{ required: this.bindUserIdShow, message: '必填字段' }] }]">
              <a-select-option v-for="(d, index) in bindUserIdData" :key="d.bindUserId">
                {{ d.bindUserId }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <br>

    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}
export default {
  name: 'devBindInfoAdd',
  props: {
    devBindInfoAddVisiable: {
      default: false
    },
    instId: '',
  },
  data() {
    return {
      bindMchntNData: [],
      bindUserIdData: [],
      loading: false,
      msgPushKeyShow: false,
      bindUserIdShow: false,
      formItemLayout,
      form: this.$form.createForm(this),
      validateStatus: '',
      // firstValue: {},
      info: {
        infoName: '',
        remark: '',
        menuId: ''
      }
    }
  },
  computed: {
    show: {
      get: function () {
        return this.devBindInfoAddVisiable
      },
      set: function () {
      }
    }
  },
  mounted() {

  },

  methods: {

    selectBindUserId() {
      this.bindUserIdData = []
      let mchntNo = this.form.getFieldsValue(['mchntNo'])
      if (mchntNo.mchntNo) {
        let bindMchntNo = mchntNo.mchntNo.substr(0, 15)
        this.$get('devBindInfo/findBindUserId', { bindMchntNo: bindMchntNo }).then((r) => {
          let result = r.data
          if (result.length == 0) {
            this.$message.warning('选择绑定商户查不到收银员昵称')
            return
          }
          result.forEach(r => {
            this.bindUserIdData.push(r);
          })
        })
      } else {
        this.$message.warning('请先选择绑定商户')
        return
      }
    },

    showMsgPushKey() {
      let msgPushFlag = this.form.getFieldsValue(['msgPushFlag'])
      if (msgPushFlag.msgPushFlag == 'Y') {
        this.msgPushKeyShow = true
      } else {
        this.msgPushKeyShow = false
      }
    },

    selectBindMchntN(val) {
      this.bindMchntNData = []
      let param = {}
      if (val) {
        param = {
          q: encodeURIComponent(val + `&${this.instId}`),
          pageSize: 20
        }
      } else {
        param = {
          q: encodeURIComponent(`&${this.instId}`),
          pageSize: 20
        }
      }

      this.$get('admin/mcmp/bMchntBaseInfo/mchntFormalSelect2List', param).then((r) => {
        let result = r.data.rows
        result.forEach(r => {
          this.bindMchntNData.push(r);
        })
      })

    },

    showBindUserId() {
      let bindType = this.form.getFieldsValue(['bindType'])
      if (bindType.bindType == '00') {
        this.bindUserIdShow = true
      } else {
        this.bindUserIdShow = false
      }
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    reset() {
      this.loading = false
      this.form.resetFields()
    },
    onClose() {
      this.msgPushKeyShow = false
      this.bindUserIdShow = false
      this.reset()
      this.$emit('close')
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.setInfoFields()
          this.loading = true
          this.info.instId = this.instId
          this.info.bindMchntNo = this.info.mchntNo
          this.info.remark5 = this.info.bindType
          console.log(this.info)
          this.$post('devBindInfo', {
            ...this.info
          }).then((r) => {
            this.reset()
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },

    setInfoFields() {
      let values = this.form.getFieldsValue(['bindDevId', 'bindDevBrand', 'bindDevModel', 'msgPushFlag',
        'bindType', 'mchntNo', 'msgPushKey', 'bindUserId'])
      if (typeof values !== 'undefined') {
        Object.keys(values).forEach(_key => {
          this.info[_key] = values[_key]
        })
      }
    }


  }

}
</script>

